<template>
    <div class="instanceTree">
        <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText" class="query-content">
        </el-input>
        <el-tree
                :expand-on-click-node="false"
                ref="tree"
                class="filter-tree"
                :data="treeData"
                :props="defaultProps"
                default-expand-all
                :filter-node-method="filterNode"
                @node-click="handleNodeClick">
                <span class="el-tree-node__label" slot-scope="{node,data}">
                <i :class="Array.isArray(data.children) && data.children.length >0?'fa fa-cubes':'fa fa-cube'"></i>
                <span>{{ node.label }}</span>
            </span>
        </el-tree>
    </div>
</template>

<script>
export default {
    name: "InstanceTree",
    data() {
        return {
            filterText: "",
            defaultProps: {
                children: 'children',
                label: 'displayName',
            },
            instanceTreeData: [],
            currentNodeData: {},
        }
    },
    props: {
        treeData: {
            type: Array,
            default: []
        }
    },

    mounted() {
        this.instanceTreeData = this.treeData;
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        handleNodeClick(data) {
            console.log(1,data)
            this.currentNodeData = {};
            this.currentNodeData = data;
            this.$emit('currentNodeData', data);
            this.currentNodeData = {};
        }

    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
}
</script>

<style scoped>

.query-content {
    margin-bottom: 10px;
    line-height: 35px;
}

.filter-tree .el-tree-node__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-tree.expanded-node::before {
    font-family: "Font Awesome 6 Free", serif;
    font-weight: 400;
    content: "\f146";
}

.el-tree.collapsed-node::before {
    font-family: "Font Awesome 6 Free", serif;
    font-weight: 400;
    content: "\f0fe";
}

.query-content >>> .el-input__inner {
    border: 1px solid #dee2e6 !important;
    border-radius: 5px;
    padding: 0;
}
</style>